<template>
  <div id="modal">
    <commonModal ref="myModal" width="40%" title="志愿选择">
      <template #default>
        <a-form ref="formRef" :rules="rules" :model="form"
          :label-col="{ style: { width: '150px', textAlign: 'left' } }">
          <a-form-item label="第一意向城市" name="volcity1">
            <a-select style="width: 100%" v-model:value="form.volcity1" @change="handleVol1Change()">
              <a-select-option v-for="v in cityOptions" :key="v.value" :value="v.value">{{ v.label
                }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="第1志愿" name="vol1" id="vol1Ref" v-if="form.volcity1">
            <a-cascader v-model:value="form.vol1" :options="options1" placeholder="请选择" />
          </a-form-item>
          <a-form-item label="第2志愿" name="vol2" id="vol2Ref" v-if="form.volcity1">
            <a-cascader v-model:value="form.vol2" ref='vol2Ref' :options="options1" placeholder="请选择" />
          </a-form-item>
          <a-form-item label="第二意向城市" name="volcity2">
            <a-select style="width: 100%" v-model:value="form.volcity2" @change="handleVol2Change()">
              <a-select-option v-for="v in cityOptions" :key="v.value" :value="v.value">{{ v.label
                }}</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="第3志愿" name="vol3" id="vol3Ref" v-if="form.volcity2">
            <a-cascader v-model:value="form.vol3" :options="options2" placeholder="请选择" />
          </a-form-item>
          <a-form-item label="第4志愿" name="vol4" id="vol4Ref" v-if="form.volcity2">
            <a-cascader v-model:value="form.vol4" ref='vol4Ref' :options="options2" placeholder="请选择" />
          </a-form-item>
          <a-form-item label="地区是否接受调剂" name="area">
            <!-- <div class="error-msg" v-show="!form.area && startFlag">此项为必填</div> -->
            <a-radio-group v-model:value="form.area">
              <a-radio :value="item.value" v-for="item in radioOptions" :key="item.label">{{
                item.label
              }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="科目是否接受调剂" name="subject">
            <!-- <div class="error-msg" v-show="!form.subject && startFlag">此项为必填</div> -->
            <a-radio-group v-model:value="form.subject">
              <a-radio :value="item.value" v-for="item in radioOptions" :key="item.label">{{
                item.label
              }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="年级是否接受调剂" name="grade">
            <!-- <div class="error-msg" v-show="!form.grade && startFlag">此项为必填</div> -->
            <a-radio-group v-model:value="form.grade">
              <a-radio :value="item.value" v-for="item in radioOptions" :key="item.label">{{
                item.label
              }}</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
        <div class="tip">
          每人仅允许填写一次志愿，请根据实际情况填写，提交成功后无法自助修改。如有特殊情况请及时与对应HR沟通。
        </div>
        <div class="btn-area">
          <a-button @click="myModal.show = false">取消</a-button>
          <a-button type="primary" @click="confirm">确认</a-button>
        </div>
      </template>
    </commonModal>
  </div>
  <FinishModal v-if="showFinishModal" @closeFinishModal="showFinishModal = false">
  </FinishModal>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue"
import commonModal from '../index/commonModal.vue';
import type { Rule } from 'ant-design-vue/es/form';
import FinishModal from "../index/FinishModal.vue";
const myModal = ref<typeof commonModal>(commonModal);
import { useStore } from "../../store/index.ts";
import apis from "../../api/index.ts"
const { saveUservolunteer, selectCommonDictionary } = apis
const store = useStore()
const show = () => {
  myModal.value.show = true;
};
const emits = defineEmits(['refresh'])
const form = ref<any>({
  subject: '',
  area: '',
  grade: '',
});
const radioOptions = ref([
  { label: '是', value: 0 },
  { label: '否', value: 1 },
]);

const showFinishModal = ref<boolean>(false);


const cityOptions = ref([
])
const rules: Record<string, Rule[]> = {
  volcity1: [{ required: true, message: '请选择', trigger: 'change' }],
  volcity2: [{ required: true, message: '请选择', trigger: 'change' }],
  vol1: [{ required: true, message: '请选择', trigger: 'change' }],
  vol2: [{ required: true, message: '请选择', trigger: 'change' }],
  vol3: [{ required: true, message: '请选择', trigger: 'change' }],
  vol4: [{ required: true, message: '请选择', trigger: 'change' }],
  area: [{ required: true, message: '请选择', trigger: 'change' }],
  grade: [{ required: true, message: '请选择', trigger: 'change' }],
  subject: [{ required: true, message: '请选择', trigger: 'change' }],
};
const options1 = ref([

])
const options2 = ref([

])

interface Columns {
  key: string;
  value: string;
  placeholder: string;
  options: Options[];
}
interface SelectItem {
  label: string;
  columns: Columns[];
  id: number;
}
interface Options {
  text: string;
  value: string | number;
  disabled?: boolean;
  usableList?: any
}
const getText = (index: string) => {
  const el = document.querySelector(`#vol${index}Ref .ant-select-selection-item`) as HTMLDivElement;
  if (el) {
    return el.innerText
  } else {
    return false
  }
}
const { resumeInfo } = store as any
const formRef = ref<any>(null)
const confirm = async () => {
  const map = {};

  const res = await formRef.value.validate()
  if (!res) return
  const { subject, grade, area } = form.value;
  ['1', '2', '3', '4'].forEach(el => {
    if (getText(el)) {
      map[el] = getText(el)
    }
  })
  const volunteerList = [];
  for (const key in map) {
    let val = map[key];
    const list = val.split(" / ");
    console.log(list)
    volunteerList.push({
      area: list[0],
      subject: list[1],
      grade: list[2],
    })
  }

  const param = {
    subjectIsAdjust: subject,
    gradeIsAdjust: grade,
    areaIsAdjust: area,
    volunteerList: volunteerList,
    resumesId: resumeInfo.resumesId
  };
  console.log(param, 'param')
  const data: any = await saveUservolunteer(param);
  if (data && data.code === '10000') {
    formRef.value.resetFields();
    message.success('提交成功');
    myModal.value.show = false;
    emits('refresh')
  } else {
    message.error(data.msg)
  }
};
onMounted(() => {
  getCityOptions()
})
const getCityOptions = async () => {
  form.value.vol21 = []
  form.value.vol2 = []
  const data: any = await selectCommonDictionary({ type: 0, parentId: 0 });
  if (data && data.code == '10000') {
    cityOptions.value = data.data.map(el => {
      return {
        label: el.label,
        value: el.id
      }
    })
  } else {
    message.error(data.msg)
  }

}
const handleVol1Change = async () => {
  form.value.vol1 = []
  form.value.vol2 = []
  const data: any = await selectCommonDictionary({ type: 0, parentId: form.value.volcity1 });
  if (data && data.code == '10000') {
    options1.value = data.data
  } else {
    message.error(data.msg)
  }
}

const handleVol2Change = async () => {
  form.value.vol3 = []
  form.value.vol4 = []
  const data: any = await selectCommonDictionary({ type: 0, parentId: form.value.volcity2 });
  if (data && data.code == '10000') {
    options2.value = data.data
  } else {
    message.error(data.msg)
  }
}


watch(showFinishModal, async (val) => {
  const el = document.querySelector('body') as HTMLBodyElement;
  el.style.overflowY = val ? 'hidden' : 'auto';
});

defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.item-wrap {
  display: flex;
  gap: 20px;
}

.tip {
  font-weight: 400;
  font-size: 14px;
  color: #b3c0c8;
  line-height: 28px;
}

.btn-area {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 29px;
}

.error-msg {
  left: -125px;
  top: 30px;
  position: absolute;
  font-size: 12px;
  color: red;
}

.ml-70 {
  margin-left: 56px;
}
</style>
